<template>
  <div>
    <div>
      <a-skeleton active :loading="loading" :paragraph="{ rows: 8 }">
        <h2>{{ article.title }}</h2>
        <div>
          {{ article.slug }} | {{ article.rate }} | {{ article.author }} |
          {{ article.publish }}
        </div>
        <nuxt-content :document="article" />
        <NuxtLink :to="'/blog/' + (id + 1)">Next</NuxtLink>
      </a-skeleton>
    </div>
    <div>
      <a-list item-layout="vertical" size="large" :data-source="comments">
        <a-list-item slot="renderItem" key="item.id" slot-scope="item">
          <template v-if="!loadingComments">
            <span
              v-for="{ type, num } in item.votes"
              :key="type"
              slot="actions"
            >
              <a-icon :type="type" style="margin-right: 8px;" />
              {{ num }}
            </span>
          </template>
          <a-skeleton active avatar :loading="loadingComments">
            <a-list-item-meta :description="item.stamp">
              <a slot="title">{{ item.user.name }}</a>
              <a-avatar slot="avatar">{{
                userAvatar(item.user.name)
              }}</a-avatar>
            </a-list-item-meta>
            {{ item.content }}
          </a-skeleton>
        </a-list-item>
      </a-list>
    </div>
    <div>
      <a-textarea
        v-model="comment"
        placeholder="Controlled autosize"
        :auto-size="{ minRows: 3, maxRows: 5 }"
      />
      <a-button type="primary" @click="onAddComment">
        Comment
      </a-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  layout: 'blog',
  async asyncData({ params, $content, $log, error }) {
    const id = parseInt(params.id)
    const article = await $content('articles').where({ id }).fetch()
    $log(article)
    if (article.length === 0) {
      $log('invalid args: page not found')
      error({
        statusCode: 404,
        message: 'Page Not Found',
      })
    }
    return {
      id,
      article: article[0],
    }
  },
  data: () => {
    return {
      id: 0,
      loading: true,
      loadingComments: true,
      comment: '',
    }
  },
  computed: {
    ...mapState('blog', ['comments']),
    // ...mapState('blog/article', [
    //   'title',
    //   'author',
    //   'publish',
    //   'rank',
    //   'share',
    //   'like',
    //   'content',
    //   'tags',
    //   'cate',
    // ]),
    ...mapGetters('blog', ['commentsCount', 'userAvatar']),
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    ...mapActions('blog', ['getComments', 'addComment']),
    ...mapActions('blog/article', ['getArticle']),
    async init() {
      // await this.getArticle(this.id)
      this.loading = false
      await this.getComments(this.id)
      this.loadingComments = false
    },
    onAddComment() {
      this.addComment({
        id: this.id,
        content: this.comment,
      }).then(() => {
        this.comment = ''
      })
    },
  },
}
</script>
